<template>
  <div class="register-container">
    <div class="legal-decoration">
      <div class="balance-icon">
        <svg viewBox="0 0 100 100">
          <path d="M50,10 L90,90 L10,90 Z" fill="#1a5fb4" opacity="0.2"/>
          <line x1="50" y1="15" x2="50" y2="85" stroke="#1a5fb4" stroke-width="3"/>
          <line x1="25" y1="50" x2="75" y2="50" stroke="#1a5fb4" stroke-width="3"/>
          <circle cx="35" cy="35" r="8" fill="#1a5fb4" opacity="0.5"/>
          <circle cx="65" cy="65" r="8" fill="#1a5fb4" opacity="0.5"/>
        </svg>
      </div>
      <div class="document-line" v-for="(line, index) in 5" :key="index"
           :style="{
             top: `${20 + index * 15}%`,
             left: `${25 + Math.random() * 50}%`,
             width: `${40 + Math.random() * 40}%`,
             height: '1px',
             opacity: 0.4 + Math.random() * 0.3
           }"></div>
    </div>

    <div class="register-card">
      <div class="register-header">
        <div class="logo">
          <svg viewBox="0 0 24 24">
            <path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1Z" fill="#1a5fb4"/>
            <path d="M16,11H15V9H13V11H11V9H9V11H8V13H9V15H11V13H13V15H15V13H16V11Z" fill="white"/>
          </svg>
          <h1>法律援助平台</h1>
        </div>
        <p>维护公正 · 服务民生</p>
        <h2>用户注册</h2>
        <p class="form-subtitle">请填写以下信息完成注册</p>
      </div>

      <div class="register-form">
        <!-- 注册类型选择 -->
        <div class="form-group">
          <label>注册类型</label>
          <el-select
              v-model="registerType"
              placeholder="请选择注册类型"
              style="width: 100%"
              :disabled="loading"
              class="legal-select"
          >
            <el-option label="普通用户注册" value="USER"></el-option>
            <el-option label="律师注册" value="LAWYER"></el-option>
            <el-option label="管理员创建" value="ADMIN"></el-option>
          </el-select>
        </div>

        <!-- 用户名 (仅管理员创建时显示) -->
        <div class="form-group" v-if="registerType === 'ADMIN'">
          <label>用户名<span class="required">*</span></label>
          <div class="input-wrapper">
            <el-input
                v-model.trim="formData.username"
                placeholder="请输入用户名"
                :disabled="loading"
                class="legal-input"
            />
            <span class="input-icon">
              <svg viewBox="0 0 24 24">
                <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" fill="#1a5fb4"/>
              </svg>
            </span>
          </div>
        </div>

        <!-- 姓名 (律师和管理员注册时显示) -->
        <div class="form-group" v-if="registerType === 'LAWYER' || registerType === 'ADMIN'">
          <label>姓名<span class="required">*</span></label>
          <div class="input-wrapper">
            <el-input
                v-model.trim="formData.realName"
                placeholder="请输入姓名"
                :disabled="loading"
                class="legal-input"
            />
            <span class="input-icon">
              <svg viewBox="0 0 24 24">
                <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" fill="#1a5fb4"/>
              </svg>
            </span>
          </div>
        </div>

        <!-- 手机号 -->
        <div class="form-group">
          <label>手机号<span class="required">*</span></label>
          <div class="input-wrapper">
            <el-input
                v-model.trim="formData.mobile"
                type="tel"
                placeholder="请输入手机号"
                :disabled="loading"
                @blur="checkPhone"
                class="legal-input"
            />
            <span class="input-icon">
              <svg viewBox="0 0 24 24">
                <path d="M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z" fill="#1a5fb4"/>
              </svg>
            </span>
          </div>
          <div class="phone-check-status" v-if="phoneCheckStatus">
            <span :class="phoneCheckStatus.type">{{ phoneCheckStatus.message }}</span>
          </div>
        </div>

        <!-- 验证码 (公众和律师注册时显示，管理员创建不需要) -->
        <div class="form-group" v-if="registerType === 'USER' || registerType === 'LAWYER'">
          <label>验证码<span class="required">*</span></label>
          <div class="verification-code">
            <div class="input-wrapper">
              <el-input
                  v-model.trim="formData.code"
                  placeholder="请输入验证码"
                  :disabled="loading"
                  class="legal-input"
              />
              <span class="input-icon">
                <svg viewBox="0 0 24 24">
                  <path d="M12,2A6,6 0 0,0 6,8V16A6,6 0 0,0 12,22A6,6 0 0,0 18,16V8A6,6 0 0,0 12,2M8,6H10V8H8V6M11,6H13V8H11V6M14,6H16V8H14V6M8,9H10V11H8V9M11,9H13V11H11V9M14,9H16V11H14V9M11,12H13V14H11V12M11,15H13V17H11V15Z" fill="#1a5fb4"/>
                </svg>
              </span>
            </div>
            <el-button
                @click="sendVerificationCode"
                :disabled="loading || isCodeSent || countdown > 0"
                :loading="isSendingCode"
                class="legal-button-secondary"
            >
              {{ isCodeSent ? `${countdown}s后重发` : '发送验证码' }}
            </el-button>
          </div>
        </div>

        <!-- 律师执业证信息 (仅律师注册时显示) -->
        <div v-if="registerType === 'LAWYER'">
          <div class="form-group">
            <label>律师执业证号码<span class="required">*</span></label>
            <div class="input-wrapper">
              <el-input
                  v-model.trim="formData.licenseNumber"
                  placeholder="请输入律师执业证号码"
                  :disabled="loading"
                  class="legal-input"
              />
              <span class="input-icon">
                <svg viewBox="0 0 24 24">
                  <path d="M18,22H6A2,2 0 0,1 4,20V4C4,2.89 4.9,2 6,2H7V4H6V20H18V4H17V2H18A2,2 0 0,1 20,4V20A2,2 0 0,1 18,22M12,15A4,4 0 0,1 8,11V6H10V11A2,2 0 0,0 12,13A2,2 0 0,0 14,11V6H16V11A4,4 0 0,1 12,15M12,7A1,1 0 0,0 11,8A1,1 0 0,0 12,9A1,1 0 0,0 13,8A1,1 0 0,0 12,7Z" fill="#1a5fb4"/>
                </svg>
              </span>
            </div>
          </div>

          <div class="form-group">
            <label>上传律师执业证</label>
            <el-upload
                class="avatar-uploader"
                action="#"
                :auto-upload="false"
                :show-file-list="false"
                :on-change="handleLicenseUpload"
                :disabled="loading"
            >
              <img v-if="licenseImageUrl" :src="licenseImageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="upload-tip">请上传清晰的律师执业证照片（可选）</div>
          </div>
        </div>

        <!-- 密码 -->
        <div class="form-group">
          <label>密码<span class="required">*</span></label>
          <div class="input-wrapper">
            <el-input
                v-model.trim="formData.password"
                type="password"
                placeholder="请输入密码（至少6位）"
                :disabled="loading"
                class="legal-input"
            />
            <span class="input-icon">
              <svg viewBox="0 0 24 24">
                <path d="M12,17C10.89,17 10,16.1 10,14C10,11.89 10.89,11 12,11C13.11,11 14,11.9 14,14C14,16.11 13.11,17 12,17M18,20V10H6V20H18M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V10C4,8.89 4.89,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z" fill="#1a5fb4"/>
              </svg>
            </span>
          </div>
        </div>

        <!-- 确认密码 -->
        <div class="form-group">
          <label>确认密码<span class="required">*</span></label>
          <div class="input-wrapper">
            <el-input
                v-model.trim="formData.confirmPassword"
                type="password"
                placeholder="请再次输入密码"
                :disabled="loading"
                class="legal-input"
            />
            <span class="input-icon">
              <svg viewBox="0 0 24 24">
                <path d="M12,17C10.89,17 10,16.1 10,14C10,11.89 10.89,11 12,11C13.11,11 14,11.9 14,14C14,16.11 13.11,17 12,17M18,20V10H6V20H18M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V10C4,8.89 4.89,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z" fill="#1a5fb4"/>
              </svg>
            </span>
          </div>
        </div>

        <!-- 管理员角色 (仅管理员创建时显示) -->
        <div class="form-group" v-if="registerType === 'ADMIN'">
          <label>角色<span class="required">*</span></label>
          <div class="input-wrapper">
            <el-input
                v-model.trim="formData.role"
                placeholder="请输入角色"
                :disabled="loading"
                class="legal-input"
            />
            <span class="input-icon">
              <svg viewBox="0 0 24 24">
                <path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1Z" fill="#1a5fb4"/>
              </svg>
            </span>
          </div>
        </div>

        <!-- 注册协议 -->
        <div class="form-group">
          <el-checkbox
              v-model="formData.agreeToTerms"
              :disabled="loading"
              class="legal-checkbox"
          >
            我已阅读并同意
            <el-link type="primary" @click.prevent="showAgreement" class="agreement-link">《用户注册协议》</el-link>
          </el-checkbox>
        </div>

        <!-- 错误信息 -->
        <div v-if="errorMessage" class="error-message">
          {{ errorMessage }}
        </div>

        <!-- 提交按钮 -->
        <div class="form-group">
          <el-button
              type="primary"
              @click="handleSubmit"
              :loading="loading"
              style="width: 100%"
              class="legal-button-primary"
          >
            {{ registerType === 'ADMIN' ? '创建管理员' : '注册' }}
          </el-button>
        </div>

        <!-- 登录链接 -->
        <div class="login-link">
          已有账号？
          <router-link to="/login" class="login-router-link">立即登录</router-link>
        </div>
      </div>
    </div>

    <!-- 注册协议弹窗 -->
    <el-dialog
        title="用户注册协议"
        v-model="agreementDialogVisible"
        width="600px"
        class="legal-dialog"
    >
      <div class="agreement-content" v-html="agreementContent"></div>
      <template #footer>
        <el-button @click="agreementDialogVisible = false" class="legal-button-secondary">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, reactive, onUnmounted} from 'vue'
import { useRouter } from 'vue-router'
import { UserApi, SmsApi } from '@/api/user'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()

// 注册类型
const registerType = ref('USER')

// 表单数据
const formData = reactive({
  username: '',
  realName: '',
  mobile: '',
  code: '', // 与后端 DTO 字段名匹配
  password: '',
  confirmPassword: '',
  licenseNumber: '',
  role: '',
  agreeToTerms: false
})

// 状态管理
const loading = ref(false)
const isSendingCode = ref(false)
const isCodeSent = ref(false)
const countdown = ref(0)
const errorMessage = ref('')
const phoneCheckStatus = ref(null)
const agreementDialogVisible = ref(false)
const agreementContent = ref('')
const agreementVersion = ref('')
const licenseImageUrl = ref('')
const licenseImageFile = ref(null)

// 倒计时器
let timer = null

// 发送验证码
const sendVerificationCode = async () => {
  // 验证手机号
  if (!validatePhone(formData.mobile)) {
    errorMessage.value = '请输入正确的手机号'
    return
  }

  try {
    isSendingCode.value = true
    errorMessage.value = ''

    // 调用API发送验证码
    const requestData = {
      mobile: formData.mobile,
      type: registerType.value === 'LAWYER' ? 'LAWYER_REGISTER' : 'REGISTER'
    }

    const response = await SmsApi.sendVerificationCode(requestData)

    if (response && response.code === 200) {
      ElMessage.success('验证码发送成功')
      isCodeSent.value = true
      startCountdown()
    } else {
      throw new Error(response?.msg || '发送验证码失败')
    }
  } catch (error) {
    errorMessage.value = error.message || '发送验证码失败'
  } finally {
    isSendingCode.value = false
  }
}

// 开始倒计时
const startCountdown = () => {
  countdown.value = 60
  timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
      isCodeSent.value = false
    }
  }, 1000)
}

// 验证手机号格式
const validatePhone = (phone) => {
  const phoneRegex = /^1[3-9]\d{9}$/
  return phoneRegex.test(phone)
}

// 检查手机号是否已被注册
const checkPhone = async () => {
  if (!formData.mobile) {
    phoneCheckStatus.value = null
    return
  }

  if (!validatePhone(formData.mobile)) {
    phoneCheckStatus.value = {
      type: 'error',
      message: '手机号格式不正确'
    }
    return
  }

  try {
    // 调用API检查手机号
    const response = await UserApi.checkPhone({ mobile: formData.mobile })

    if (response && response.code === 200) {
      if (response.data.exists) {
        phoneCheckStatus.value = {
          type: 'error',
          message: '该手机号已被注册'
        }
      } else {
        phoneCheckStatus.value = {
          type: 'success',
          message: '手机号可用'
        }
      }
    } else {
      phoneCheckStatus.value = null
    }
  } catch (error) {
    console.error('检查手机号失败:', error)
    phoneCheckStatus.value = null
  }
}

// 处理律师执业证上传
const handleLicenseUpload = (file) => {
  const rawFile = file.raw
  if (rawFile) {
    licenseImageFile.value = rawFile
    licenseImageUrl.value = URL.createObjectURL(rawFile)
  }
}

const showAgreement = async () => {
  try {
    // 获取最新注册协议
    const response = await UserApi.getAgreement()

    if (response && response.code === 200) {
      // 根据后端实际返回结构处理数据
      agreementContent.value = response.data || ''
      // 从 msg 字段获取版本号
      agreementVersion.value = response.msg || ''
      agreementDialogVisible.value = true

      // 添加调试信息
      console.log('协议内容:', agreementContent.value)
      console.log('协议版本:', agreementVersion.value)
    } else {
      ElMessage.error(response?.msg || '获取协议失败')
    }
  } catch (error) {
    ElMessage.error('获取协议失败: ' + (error.message || '网络错误'))
  }
}

// 验证表单
const validateForm = () => {
  errorMessage.value = ''

  // 通用验证
  if (!formData.mobile) {
    errorMessage.value = '请输入手机号'
    return false
  }

  if (!validatePhone(formData.mobile)) {
    errorMessage.value = '请输入正确的手机号'
    return false
  }

  if (!formData.password) {
    errorMessage.value = '请输入密码'
    return false
  }

  if (formData.password.length < 6) {
    errorMessage.value = '密码长度不能少于6位'
    return false
  }

  if (formData.password !== formData.confirmPassword) {
    errorMessage.value = '两次输入的密码不一致'
    return false
  }

  if (!formData.agreeToTerms) {
    errorMessage.value = '请同意注册协议'
    return false
  }

  // 根据注册类型进行特定验证
  if (registerType.value === 'USER' || registerType.value === 'LAWYER') {
    if (!formData.code) {
      errorMessage.value = '请输入验证码'
      return false
    }
  }

  if (registerType.value === 'ADMIN') {
    if (!formData.username) {
      errorMessage.value = '请输入用户名'
      return false
    }
    if (!formData.realName) {
      errorMessage.value = '请输入姓名'
      return false
    }
    if (!formData.role) {
      errorMessage.value = '请输入角色'
      return false
    }
  }

  if (registerType.value === 'LAWYER') {
    if (!formData.realName) {
      errorMessage.value = '请输入姓名'
      return false
    }
    if (!formData.licenseNumber) {
      errorMessage.value = '请输入律师执业证号码'
      return false
    }
  }

  // 检查手机号是否已被注册
  if (phoneCheckStatus.value && phoneCheckStatus.value.type === 'error' &&
      phoneCheckStatus.value.message === '该手机号已被注册') {
    errorMessage.value = '该手机号已被注册，请更换手机号'
    return false
  }

  return true
}

// 提交注册表单
const handleSubmit = async () => {
  if (!validateForm()) {
    return
  }

  try {
    loading.value = true

    switch (registerType.value) {
      case 'USER':
        await submitPublicRegister()
        break
      case 'LAWYER':
        await submitLawyerRegister()
        break
      case 'ADMIN':
        await submitAdminCreate()
        break
    }
  } catch (error) {
    errorMessage.value = error.message || '注册失败'
  } finally {
    loading.value = false
  }
}

//普通用户注册
const submitPublicRegister = async () => {
  try {
    const requestData = {
      username: formData.mobile, // 使用手机号作为用户名
      mobile: formData.mobile,
      password: formData.password,
      code: formData.code, // 与后端 DTO 字段名匹配
      agreementVersion: agreementVersion.value
    }

    const response = await UserApi.publicRegister(requestData)

    if (response && response.code === 200) {
      ElMessage.success('注册成功')
      // 注册成功后跳转到登录页
      setTimeout(() => {
        router.push('/login?registerSuccess=true')
      }, 1500)
    } else {
      throw new Error(response?.msg || '注册失败')
    }
  } catch (error) {
    throw new Error(error.message || '注册失败')
  }
}

// 律师注册 - 与后端 DTO 和数据库字段匹配
const submitLawyerRegister = async () => {
  try {
    // 验证密码是否符合后端要求（包含数字、字母和特殊字符）
    if (!/^[a-zA-Z0-9!@#$%^&*()_+\-=\[\]{}|;:'",.<>/?]+$/.test(formData.password)) {
      throw new Error('密码必须包含数字、字母和特殊字符')
    }

    const formDataToSend = new FormData()

    // 基本用户信息（User表字段）- 与后端DTO字段保持一致
    formDataToSend.append('mobile', formData.mobile)           // 手机号
    formDataToSend.append('code', formData.code)               // 验证码
    formDataToSend.append('password', formData.password)       // 密码
    formDataToSend.append('username', formData.mobile)         // 用户名(使用手机号)
    formDataToSend.append('realName', formData.realName)       // 真实姓名

    // 律师特有信息（Lawyer表字段）
    formDataToSend.append('licenseNumber', formData.licenseNumber) // 执业证号

    // 执业证照片(可选)
    if (licenseImageFile.value) {
      formDataToSend.append('licensePhoto', licenseImageFile.value) // 确保字段名与后端一致
    }
    // 协议版本号 - 这是必需字段
    if (agreementVersion.value) {
      formDataToSend.append('agreementVersion', agreementVersion.value)
    } else {
      throw new Error('无法获取注册协议版本，请刷新页面重试')
    }

    formDataToSend.append('agreementVersion', agreementVersion.value) // 协议版本号
    // 调试信息 - 查看发送的数据
    console.log('发送的律师注册数据:')
    for (let [key, value] of formDataToSend.entries()) {
      console.log(key, value)
    }

    const response = await UserApi.lawyerRegister(formDataToSend)

    if (response && response.code === 200) {
      ElMessage.success('律师注册申请已提交，请等待审核')
      setTimeout(() => {
        router.push('/login?registerSuccess=true&userType=lawyer')
      }, 1500)
    } else {
      throw new Error(response?.msg || '律师注册申请提交失败')
    }
  } catch (error) {
    console.error('律师注册错误详情:', error)
    // 提供更详细的错误信息
    const errorMsg = error.message || '律师注册申请提交失败'
    ElMessage.error(`律师注册失败: ${errorMsg}`)
    throw new Error(errorMsg)
  }
}

// 管理员创建
const submitAdminCreate = async () => {
  try {
    const requestData = {
      username: formData.username,
      realName: formData.realName,
      mobile: formData.mobile,
      password: formData.password,
      email: formData.email,
      agreementVersion: agreementVersion.value
    }

    const response = await UserApi.adminCreate(requestData)

    if (response && response.code === 200) {
      ElMessage.success('管理员创建成功')
      // 管理员创建成功
      setTimeout(() => {
        router.push('/login?createSuccess=true')
      }, 1500)
    } else {
      throw new Error(response?.msg || '管理员创建失败')
    }
  } catch (error) {
    throw new Error(error.message || '管理员创建失败')
  }
}

// 组件销毁时清理定时器
onUnmounted(() => {
  if (timer) clearInterval(timer)
})
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  background: linear-gradient(135deg, #f5f9ff 0%, #e8f0fe 100%);
  position: relative;
  overflow: hidden;
  font-family: 'Microsoft YaHei', 'SimHei', sans-serif;
}

.legal-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.balance-icon {
  position: absolute;
  top: 15%;
  left: 10%;
  width: 180px;
  height: 180px;
  opacity: 0.08;
}

.document-line {
  position: absolute;
  background-color: #1a5fb4;
}

.register-card {
  width: 100%;
  max-width: 450px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 36, 80, 0.12);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.register-header {
  background: linear-gradient(to right, #1a5fb4, #1e78cd);
  color: white;
  padding: 30px 30px 20px;
  text-align: center;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
}

.logo svg {
  width: 50px;
  height: 50px;
  margin-bottom: 15px;
}

.logo h1 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin: 0;
}

.register-header p {
  font-size: 14px;
  opacity: 0.9;
  margin: 8px 0 0;
}

.register-header h2 {
  color: white;
  font-size: 24px;
  font-weight: 600;
  margin: 20px 0 5px;
}

.form-subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  margin: 0 0 15px;
}

.register-form {
  padding: 25px 30px 30px;
}

.form-group {
  margin-bottom: 22px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #34495e;
  font-size: 15px;
}

.required {
  color: #e74c3c;
  margin-left: 4px;
}

.input-wrapper {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.input-icon svg {
  width: 20px;
  height: 20px;
}

.legal-input :deep(.el-input__wrapper) {
  border-radius: 6px;
  border: 1px solid #dce4ec;
  box-shadow: none;
  transition: all 0.3s ease;
  padding-left: 45px;
  background-color: #f9fbfd;
}

.legal-input :deep(.el-input__wrapper:hover) {
  border-color: #3498db;
}

.legal-input :deep(.el-input__wrapper.is-focus) {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}

.legal-select :deep(.el-select) {
  width: 100%;
}

.legal-select :deep(.el-select .el-input__wrapper) {
  border-radius: 6px;
  border: 1px solid #dce4ec;
  box-shadow: none;
  background-color: #f9fbfd;
}

.legal-button-primary {
  background: linear-gradient(to right, #1a5fb4, #1e78cd);
  border: none;
  color: white;
  border-radius: 6px;
  font-weight: 500;
  font-size: 16px;
  padding: 14px 20px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(26, 95, 180, 0.25);
}

.legal-button-primary:hover {
  background: linear-gradient(to right, #164b9d, #1a5fb4);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(26, 95, 180, 0.35);
}

.legal-button-secondary {
  background: #ecf0f1;
  border-color: #bdc3c7;
  color: #34495e;
  border-radius: 6px;
  transition: all 0.3s ease;
  box-shadow: none;
  padding: 12px 15px;
}

.legal-button-secondary:hover {
  background: #d5dbdb;
  border-color: #95a5a6;
}

.verification-code {
  display: flex;
  gap: 12px;
}

.verification-code .el-button {
  white-space: nowrap;
  flex-shrink: 0;
}

.phone-check-status {
  margin-top: 6px;
  font-size: 13px;
}

.phone-check-status .success {
  color: #27ae60;
}

.phone-check-status .error {
  color: #e74c3c;
}

.avatar-uploader .el-upload {
  border: 2px dashed #dce4ec;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  background-color: #f8f9fa;
}

.avatar-uploader .el-upload:hover {
  border-color: #3498db;
  background-color: #e3f2fd;
}

.avatar-uploader-icon {
  font-size: 32px;
  color: #95a5a6;
  width: 130px;
  height: 130px;
  text-align: center;
  line-height: 130px;
}

.avatar {
  width: 130px;
  height: 130px;
  display: block;
  object-fit: cover;
}

.upload-tip {
  font-size: 13px;
  color: #7f8c8d;
  margin-top: 8px;
  font-style: italic;
}

.legal-checkbox :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #3498db;
  border-color: #3498db;
}

.legal-checkbox :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
  color: #3498db;
}

.agreement-link {
  font-weight: 500;
}

.error-message {
  color: #e74c3c;
  margin-bottom: 20px;
  padding: 12px 16px;
  background-color: #fdf2f2;
  border: 1px solid #f5bfbf;
  border-radius: 6px;
  text-align: center;
  font-size: 14px;
}

.login-link {
  text-align: center;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #ecf0f1;
  color: #7f8c8d;
  font-size: 14px;
}

.login-router-link {
  color: #3498db;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.login-router-link:hover {
  color: #2980b9;
  text-decoration: underline;
}

.agreement-content {
  max-height: 400px;
  overflow-y: auto;
  padding: 15px;
  border: 1px solid #ecf0f1;
  border-radius: 6px;
  background-color: #f8f9fa;
  font-size: 14px;
  line-height: 1.6;
}

.legal-dialog :deep(.el-dialog__header) {
  background: #2c3e50;
  color: white;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.legal-dialog :deep(.el-dialog__title) {
  color: white;
  font-weight: 500;
}

.legal-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
  color: white;
}

@media (max-width: 576px) {
  .register-card {
    margin: 10px;
  }

  .verification-code {
    flex-direction: column;
  }

  .verification-code .el-button {
    width: 100%;
  }
}
</style>
